<script>
import { CircleCheck, CircleCheckFilled } from '@element-plus/icons-vue'
import { getStudentList } from "../../api/class";
import { ElMessage } from 'element-plus'
export default {
    data() {
        return {
            tableData1: [],
            tableData2: [],
            class1Select: '2210',
            class2Select: '2210',
            list1: [],
            list2: [],
        }
    },
    methods: {
        getWantList1() {
            getStudentList({
                className: this.class1Select,
            }).then(res => {
                if (res.code == '200') {
                    this.tableData1 = res.data;
                    // console.log(this.tableData[0]);
                    this.getTenStuList1();
                } else {
                    ElMessage(res.msg)
                }
            })
        },
        getWantList2() {
            getStudentList({
                className: this.class2Select,
            }).then(res => {
                if (res.code == '200') {
                    this.tableData2 = res.data;
                    // console.log(this.tableData[0]);
                    this.getTenStuList2();
                } else {
                    ElMessage(res.msg)
                }
            })
        },

        // 获取排名前十的学生
        getTenStuList1(){
            // 获取排序后的数组
            this.list1 = this.tableData1.sort((a, b) => {
                return b.nowGrade - a.nowGrade
            }).slice(0, 10);
        },
        getTenStuList2(){
            // 获取排序后的数组
            this.list2 = this.tableData2.sort((a, b) => {
                return (b.nowGrade - b.stuPreGrade)-(a.nowGrade - a.stuPreGrade)
            }).slice(0, 10);
            this.list2.forEach(item=>{
                item.addGrade=(item.nowGrade -item.stuPreGrade).toFixed(1);
            })
        },

        // 点击点赞
        changeBtn(row) {
            row.isApproval = !row.isApproval;
        },

    },
    components: {
        CircleCheck,
        CircleCheckFilled
    },
    mounted() {
        getStudentList().then(res => {
            this.tableData1 = res.data;
            this.tableData2 = res.data;
            // console.log(this.tableData1[0]);
            this.getTenStuList1();
            this.getTenStuList2();
        });
    },

}
</script>
<template>
    <div>
        <div class="rankingList">
            <div class="List1">
                <span class="title">学习光荣榜</span>
                <div class="input">
                    <label for="">班级选择</label>
                    <el-select v-model="class1Select" style="width: 115px" placeholder=" " @change="getWantList1">
                        <el-option value="2210" />
                        <el-option value="2211" />
                        <el-option value="2212" />
                        <el-option value="2213" />
                        <el-option value="2214" />
                        <el-option value="2215" />
                    </el-select>
                </div>
                <div class="topThree" v-if="list1.length">
                    <div class="two" style="marginTop:80px;">
                       <!-- {{ list1[1] }} -->
                       <el-badge value="2">
                           <img :src="list1[1].stuImg" alt="">
                       </el-badge>
                        <div class="nameBtn">
                            <span >{{list1[1].stuName}}:</span>
                            <div class="name2" @click="list1[1].isApproval=!list1[1].isApproval">
                                <el-icon v-show="!list1[1].isApproval">
                                    <CircleCheck />
                                </el-icon>
                                <el-icon v-show="list1[1].isApproval">
                                    <CircleCheckFilled />
                                </el-icon>
                            </div>
                        </div>
                        <div>
                            <span>线性代数:{{list1[1].stuGrade['线性代数']}}</span>
                        </div>
                        <div>
                            <span>微积分:{{list1[1].stuGrade['微积分']}}</span>
                        </div>
                        <div>
                            <span>平均分数:{{list1[1].nowGrade}}</span>
                        </div>
                    </div>
                    <div class="one" style="marginTop:20px;">
                        <!-- {{ list1[0].stuImg}} -->
                        <el-badge value="1">
                            <img :src="list1[0].stuImg" alt="">
                        </el-badge>
                        <div class="nameBtn">
                            <span >{{list1[0].stuName}}:</span>
                            <div class="name2" @click="list1[0].isApproval=!list1[0].isApproval">
                                <el-icon v-show="!list1[0].isApproval">
                                    <CircleCheck />
                                </el-icon>
                                <el-icon v-show="list1[0].isApproval">
                                    <CircleCheckFilled />
                                </el-icon>
                            </div>
                        </div>
                        <div>
                            <span>线性代数:{{list1[0].stuGrade['线性代数']}}</span>
                        </div>
                        <div>
                            <span>微积分:{{list1[0].stuGrade['微积分']}}</span>
                        </div>
                        <div>
                            <span>平均分数:{{list1[0].nowGrade}}</span>
                        </div>
                    </div>
                    <div class="three" style="marginTop:100px;">
                        <el-badge value="3">
                            <img :src="list1[2].stuImg" alt="">
                        </el-badge>
                        <div class="nameBtn">
                            <span >{{list1[2].stuName}}:</span>
                            <div class="name2" @click="list1[2].isApproval=!list1[2].isApproval">
                                <el-icon v-show="!list1[2].isApproval">
                                    <CircleCheck />
                                </el-icon>
                                <el-icon v-show="list1[2].isApproval">
                                    <CircleCheckFilled />
                                </el-icon>
                            </div>
                        </div>
                        <div>
                            <span>线性代数:{{list1[2].stuGrade['线性代数']}}</span>
                        </div>
                        <div>
                            <span>微积分:{{list1[2].stuGrade['微积分']}}</span>
                        </div>
                        <div>
                            <span>平均分数:{{list1[2].nowGrade}}</span>
                        </div>
                    </div>
                </div>
                <el-table :data="list1.slice(3, 10)">
                    <el-table-column type="index" :index="4" label="排名" width="80" />
                    <el-table-column prop="stuNickname" label="昵称" />
                    <el-table-column prop="stuGrade['线性代数']" label="线性代数" />
                    <el-table-column prop="stuGrade['微积分']" label="微积分" />
                    <el-table-column prop="nowGrade" label="平均分数" />
                    <!-- 好像可以用 :sort-method="sortMethod" 来实现排序 -->
                    <el-table-column label="点赞">
                        <template #default="scope">
                            <div @click="changeBtn(scope.row)">
                                <el-icon v-show="!scope.row.isApproval">
                                    <CircleCheck />
                                </el-icon>
                                <el-icon v-show="scope.row.isApproval">
                                    <CircleCheckFilled />
                                </el-icon>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="List2">
                <span class="title">成绩进步榜</span>
                <div class="input">
                    <label for="">班级选择</label>
                    <el-select v-model="class2Select" style="width: 115px" placeholder=" " @change="getWantList2">
                        <el-option value="2210" />
                        <el-option value="2211" />
                        <el-option value="2212" />
                        <el-option value="2213" />
                        <el-option value="2214" />
                        <el-option value="2215" />
                    </el-select>
                </div>
                <div class="topThree" v-if="list2.length">
                    <div class="two" style="marginTop:80px;">
                       <!-- {{ list1[1] }} -->
                       <el-badge value="2">
                           <img :src="list2[1].stuImg" alt="">
                       </el-badge>
                        <div class="nameBtn">
                            <span >{{list2[1].stuName}}:</span>
                            <div class="name2" @click="list2[1].isApproval=!list2[1].isApproval">
                                <el-icon v-show="!list2[1].isApproval">
                                    <CircleCheck />
                                </el-icon>
                                <el-icon v-show="list2[1].isApproval">
                                    <CircleCheckFilled />
                                </el-icon>
                            </div>
                        </div>
                        <div>
                            <span>上次分数:{{list2[2].stuPreGrade}}</span>
                        </div>
                        <div>
                            <span>这次分数:{{list2[2].nowGrade}}</span>
                        </div>
                        <div>
                            <span>提升:{{list2[2].addGrade}}</span>
                        </div>
                    </div>
                    <div class="one" style="marginTop:20px;">
                        <!-- {{ list2[0].stuImg}} -->
                        <el-badge value="1">
                            <img :src="list2[0].stuImg" alt="">
                        </el-badge>
                        <div class="nameBtn">
                            <span >{{list2[0].stuName}}:</span>
                            <div class="name2" @click="list2[0].isApproval=!list2[0].isApproval">
                                <el-icon v-show="!list2[0].isApproval">
                                    <CircleCheck />
                                </el-icon>
                                <el-icon v-show="list2[0].isApproval">
                                    <CircleCheckFilled />
                                </el-icon>
                            </div>
                        </div>
                        <div>
                            <span>上次分数:{{list2[2].stuPreGrade}}</span>
                        </div>
                        <div>
                            <span>这次分数:{{list2[2].nowGrade}}</span>
                        </div>
                        <div>
                            <span>提升:{{list2[2].addGrade}}</span>
                        </div>
                    </div>
                    <div class="three" style="marginTop:100px;">
                        <el-badge value="3">
                            <img :src="list2[2].stuImg" alt="">
                        </el-badge>
                        <div class="nameBtn">
                            <span >{{list2[2].stuName}}:</span>
                            <div class="name2" @click="list2[2].isApproval=!list2[2].isApproval">
                                <el-icon v-show="!list2[2].isApproval">
                                    <CircleCheck />
                                </el-icon>
                                <el-icon v-show="list2[2].isApproval">
                                    <CircleCheckFilled />
                                </el-icon>
                            </div>
                        </div>
                        <div>
                            <span>上次分数:{{list2[2].stuPreGrade}}</span>
                        </div>
                        <div>
                            <span>这次分数:{{list2[2].nowGrade}}</span>
                        </div>
                        <div>
                            <span>提升:{{list2[2].addGrade}}</span>
                        </div>
                    </div>
                </div>
                <el-table :data="list2.slice(3, 10)">
                    <el-table-column type="index" :index="4" label="排名" width="80" />
                    <el-table-column prop="stuNickname" label="昵称" />
                    <el-table-column prop="stuPreGrade" label="上次分数" />
                    <el-table-column prop="nowGrade" label="这次分数" />
                    <el-table-column prop="addGrade" label="提升" />
                    <el-table-column label="点赞">
                        <template #default="scope">
                            <div @click="changeBtn(scope.row)">
                                <el-icon v-show="!scope.row.isApproval">
                                    <CircleCheck />
                                </el-icon>
                                <el-icon v-show="scope.row.isApproval">
                                    <CircleCheckFilled />
                                </el-icon>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.rankingList {
    display: flex;
    width: 100%;
    height: 100%;
    color: black;

    .List1 {
        margin-right: 10px;

        .el-table {
            --el-table-header-bg-color: #4b19d1;
        }
    }

    .List2 {
        .el-table {
            --el-table-header-bg-color: #ea9711;
        }
    }

    .List1,
    .List2 {
        width: 48%;
        height: 100%;
        display: flex;
        flex-direction: column;

        .title {
            height: 30px;
            position: relative;
            margin-left: 20px;
            margin-bottom: 10px;
        }

        .title::before {
            display: block;
            content: '';
            width: 5px;
            height: 5px;
            border-radius: 100%;
            background-color: black;
            position: absolute;
            left: -10px;
            top: 10px;
        }

        .input {
            margin-bottom: 20px;

            .el-select {
                margin-left: 50px;
                width: 115px;
            }
        }

        .topThree {
            width: 600px;
            box-sizing: border-box;
            display: flex;
            height: 350px;
            margin-bottom: 10px;
            padding-left: 100px;
            
        }
    }
}
.topThree>div {
    width: 120px;
    height: 100%;
    margin-right: 10px;
    //background-color: #1fe042;
    display: flex;
    flex-direction: column;
    .el-badge{
        width: 40px;
        height: 40px;
    }
    img{
        width: 40px;
        height: 40px;
    }
    div{
        height: 30px;
        line-height: 25px;
    }
}
.nameBtn{
    display: flex;
    flex-direction: row;
    span{
        width: 50px;
        height: 30px;
        float: left;
    }
    .nameBtn{
        width: 50px;
        float: left;
    }
}
</style>